<template>
    <div class="app-container">
        <!-- 关键件绑定 -->
        <div class="content">
            <!-- <div> -->
            <el-form ref="form" class="perForm" :model="form" label-width="150px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="软件版本" prop="versionIds">
                            <el-checkbox-group v-model="form.versionIds">
                                <el-checkbox v-for="dict in checkoutList" :key="dict.id" :label="dict.id"
                                    :value="dict.id">{{ dict.versionCode  }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="PCBA码" prop="pcbaCode">
                            <el-input v-model="form.pcbaCode" type="textarea" placeholder="输入PCBA码" 
                                :autosize="{ minRows: 10, maxRows: 40 }" style="width: 300px;" />
                                 <el-button type="primary" style="font-size: 24px;" @click="pcbaPush">确定</el-button>
                        </el-form-item>
                        <div v-if="material" style="text-align: center;font-size: 18px;">
                            {{ form.pcbaCode }}
                        </div>
                    </el-col>
                </el-row>


                <!-- {{ dict.type.mes_qc_type }} -->
            </el-form>
        </div>
        <div class="dialog_footer">
            <el-button @click="reset" style="font-size: 24px;">重 置</el-button>
            <el-button type="primary" style="font-size: 24px;" @click="submitForm">提 交</el-button>
        </div>
    </div>
</template>
  
<script>
// versionList
import { versionList,pcbasoft } from "@/api/apppro/index";
export default {
    name: "version",
    dicts: ['sys_yes_no', 'mes_qc_type'],
    data() {
        return {
            form: {
                versionIds: [],
            },
            material: false,
            checkoutList:[]
        };
    },

    created() {
        this.getList()
    },
    methods: {
        getList() {
            versionList().then(res => {
                this.checkoutList = res.rows || []
                console.log(res, '==========res===========');

            });
        },
       
        submitForm() {
            this.$refs["form"].validate(valid => {
              console.log(this.form,'========this.form======');
                if (valid) {
                    pcbasoft(this.form).then(res => {
                        console.log(res, '=======res=======');
                        this.$modal.msgSuccess(res.msg);


                    });

                }
            });
        },
        reset() {
            this.form = {
                qcTypesParam: undefined,
                pcbaCode:undefined
            };
            this.material = false;
            this.resetForm("form");
        },
        pcbaPush(){
            this.material = true
        },
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.perForm ::v-deep .el-form-item__label {
    font-size: 28px;
}

.content {
    margin-top: 20px;
    // text-align: center;
    display: flex;
    // width: 100%;
}

.dialog_footer {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    // display: flex;
    // justify-content: center;
}

.sn_box {
    text-align: left;
    margin-left: 10%;
    font-size: 20px;
    line-height: 40px;
}
</style>
  